import React, { Component, PropTypes } from 'react';
import { connect } from 'dva';
import { Link } from 'dva/router';
import styles from './message.less';
import VtxAlert from '../components/vtxAlert';
import {VtxMessage} from '../components/vtxMessage';
import {Button} from 'antd';
function Message() {
  let mconfig={
    top: 100,
    duration: 2//自定义设置的延迟时间优先级高
  };
  function success(content, duration){
    VtxMessage.success(content, duration);
  }
  function error(content, duration){
    VtxMessage.error(content, duration);
  }
  function warning(content, duration){
    VtxMessage.warning(content, duration);
    /*VtxMessage.warn(content, duration);//第二种警告提示方法，一样的效果*/
  }
  function info(content, duration){
    VtxMessage.info(content, duration);
  }
  function loading(content, duration){
    const hide=VtxMessage.loading(content, duration);
    setTimeout(hide,1000);
  }
  function destroy(){//所有提示消失
    VtxMessage.destroy();
  }
  function config(){
    VtxMessage.config(mconfig);
  }
  function show(type,content, duration){
    VtxMessage.show(type,content, duration);
  }
  return (
    <div className={styles.normal}>
      <ul>
        <li> 
          <p>成功、失败、警告、信息提示反馈,不传任何参数。</p>
          <Button onClick={()=>success()}>Success</Button>
          <Button onClick={()=>error()}>Error</Button>
          <Button onClick={()=>warning()}>Warning</Button>
           <Button type="primary" onClick={()=>info()}>info</Button>
        </li>
        <li> 
          <p>open方法，传入提示类型，第一个参数必填</p>
          <Button onClick={()=>show('error','这是一个错误的测试')}>show</Button>
        </li>
        <li> 
          <p>自定义时长 10s消失，默认时长为 1.5s。</p>
          <Button onClick={()=>success('这个会延迟10s关闭',10)}>Customized display duration</Button>
        </li><li> 
          <p>进行全局 loading，异步自行移除。</p>
          <Button onClick={()=>loading('全局loading，异步自动移除')}>loading</Button>
        </li><li> 
          <p>所有提示清除。</p>
          <Button onClick={destroy}>destroy</Button>
        </li><li> 
          <p>自定义提示的配置。点击该按钮之后再点击其他的提示信息是否距离顶部100px，且2s自动消失</p>
          <Button onClick={()=>config()}>Config</Button>
        </li>
      </ul>
    </div>
  );
}

Message.propTypes = {
};

export default connect()(Message);
